<template>
  <div class="mine">
    <my-head title="我的" :back="false"></my-head>

    <div class="mine-top">
      <div class="left">
        <img
          :src="require('@/assets/images/photo.png')"
          alt=""
          class="avatar"
        />
      </div>
      <div class="right">
        <div v-if="userInfo">
          {{ userInfo.username }} - {{ userInfo.phone }}
        </div>
        <h2 v-else @click="gotowhere('login')" style="font-size: 18px">
          立即登录
        </h2>
        <!-- <van-button type="primary"></van-button> -->
      </div>
    </div>
    <ul class="list">
      <li class="liitem">
        <img
          src=""
          width="26px"
          height="26px"
          alt=""
        />
        <div class="common-p">电影订单</div>
      </li>
      <li class="liitem">
        <img
          src=""
          width="26px"
          height="26px"
          alt=""
        />
        <div class="common-p">商品订单</div>
      </li>
    </ul>
    <div class="mine-box">
      <van-cell-group inset>
        <template v-if="userInfo">
          <van-cell title="优惠券" icon="location-o" value="10" is-link />
          <van-cell
            title="我的点赞"
            :to="{ name: 'mylikes' }"
            icon="like-o"
            :value="mylikes.length"
            is-link
          />
          <van-cell title="我的收藏" icon="star-o" value="15" is-link />
          <van-cell title="我的评论" icon="chat-o" :value="6" is-link />
          <van-cell title="个人信息" icon="friends-o" is-link />
          <van-cell title="余额" icon="gem-o" is-link />
          <van-cell
            title="购物车"
            icon="cart-o"
            :value="cartNum"
            is-link
            :to="{ name: 'cart' }"
          />
          <van-cell
            title="修改密码"
            icon="smile-o"
            :to="{ name: 'changepass' }"
            is-link
          />
        </template>
        <van-cell title="历史记录" icon="clock-o" is-link />
        <van-cell title="帮助和客服" icon="phone-o" />
        <van-cell title="设置" icon="setting-o" />
        <van-cell title="清除缓存" icon="share-o" @click="show = true" />
      </van-cell-group>
    </div>

    <div class="mbtn" v-if="userInfo">
      <van-button class="logout" @click="logoutAction">退出登录</van-button>
    </div>

    <van-overlay :show="show" class="mydia" @click="closeAction">
      <div class="wrapper" @click.stop>
        <van-circle
          v-if="show"
          v-model="currentRate"
          :color="gradientColor"
          :rate="100"
          :speed="15"
          :text="text"
        />
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      currentRate: 0,
      gradientColor: {
        "0%": "#3fecff",
        "100%": "#6149f6",
      },
      mylikes: [],
    };
  },
  watch: {
    currentRate(v) {
      if (v == 100) {
        this.show = false;
        var num = Math.ceil(100 * Math.random());
        this.$toast("当前已经清除了 " + num + " M 缓存数据");
        this.currentRate = 0;
      }
    },
  },
  computed: {
    text() {
      return this.currentRate + "%";
    },
  },
  methods: {
    async getCartListAsync() {
      let res = await this.$ajax.getCarts({
        username: this.userInfo.username,
      });
      this.getCartList(res); // mutations
    },
    async getMyLikes() {
      let res = await this.$ajax.getLikes({
        username: this.userInfo.username,
      });
      this.mylikes = res;
    },
    closeAction() {},
    logoutAction() {
      this.$dialog
        .confirm({
          title: "退出警告",
          message: "你真的要退出登录吗?",
        })
        .then(() => {
          this.changeUserInfo(null);
        })
        .catch(() => {});
    },
  },
  mounted() {
    if (this.userInfo) {
      this.getMyLikes();
      this.getCartListAsync();
    }
  },
};
</script>


<style lang="scss" scoped>
.mine {
  width: 100%;
  min-height: 100vh;
  background-color: #f4f4f4;
  padding-bottom: 50px;
  .mine-top {
    text-align: center;
    margin-top: -44px;
    height: 200px;
    // padding-left: 22px;
    // padding-top: 64px;
    padding: 0 30px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    .left {
      margin-right: 20px;
      .avatar {
        width: 63px;
        height: 63px;
        border-radius: 50%;
        border: 2px solid #fff;
      }
    }
    .right {
      font-size: 22px;
      font-weight: bold;
    }
  }
  .list {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 79px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    li {
      position: relative;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .common-p {
        color: #797d82;
        margin-top: 10px;
      }
    }
  }
  .mine-box {
    margin-top: 15px;
    background: #fff;
  }
  .mbtn {
    margin: 20px;
    .logout {
      width: 100%;
    }
  }

  .mydia {
    z-index: 10000;
    .wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      ::v-deep .van-circle__text {
        color: #fff;
      }
    }
  }
}
</style>